<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!--    <link rel="stylesheet" href="./layui/css/layui.css">-->
    <link rel="stylesheet" href="../layui-v2.9.8/layui/css/layui.css">
    <script src="../layui-v2.9.8/layui/layui.js"></script>
    <style type="text/css">
        .custom-popup {
            background-color: #da7a10 !important;
            color: #FAFAF9!important;
            border-radius: 12px!important;
            left: 100px!important;
            background-image: url('/img/365tanchuang.gif');
            background-repeat: no-repeat;
            min-height:100px;
        }
        .custom-popup  .layui-layer-title{
            color: #FAFAF9!important;
            height: 60px!important;
            line-height: 60px!important;
            font-size: 30px;
            font-family: 'Comic Sans MS', cursive;
        }
        .custom-popup  .layui-layer-content,.custom-popup  .layui-layer-content iframe{
            font-size: 16px;
            margin: 10px 0 0 10px;
        }
        .custom-popup  .layui-layer-setwin a{
            top: -8px;
        }
        .layui-layer-page .layui-layer-content{
            font-size: 60px;
            margin:150px 0 0 400px;
            font-family: 'Comic Sans MS', cursive;
        }
    </style>
</head>

<body>
<!--<script src="./layui/layui.js"></script>-->
<div class="table">
    <table class="layui-hide" id="pushinfotable" lay-filter="pushinfotable"></table>
</div>
<form class="layui-form" action="/process/push365add" enctype="multipart/form-data" method="post" id="refundForm" style="border: 1px solid #e6e6e6;">
<!--    <div style="display: none"><input type="text"name="id" id="formid" th:value="${id}"></div>-->
    <div class="layui-form-item" style="margin-top: 5px;">
        <div class="layui-inline">
            <label class="layui-form-label">客户姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="name" autocomplete="off" class="layui-input"   lay-affix="clear" placeholder="例:张三">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <input type="radio" name="sex" value="男" title="男" lay-verify="sex">
                <input type="radio" name="sex" value="女" title="女" lay-verify="sex">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">手机号码</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" lay-verify="phone" autocomplete="off" class="layui-input"   lay-affix="clear" placeholder="例:13812345678">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">微信号</label>
            <div class="layui-input-inline">
                <input type="text" name="wechatAccount" lay-verify="wechatAccount" autocomplete="off" class="layui-input"   lay-affix="clear" placeholder="例:wx13812345678">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">软件账号</label>
            <div class="layui-input-inline">
                <input type="text" name="softwareAccount" lay-verify="softwareAccount" autocomplete="off" class="layui-input"   lay-affix="clear" placeholder="例:13812345678">
            </div>
        </div>
    </div>

    <div class="layui-form-item">

        <div class="layui-inline">
            <label class="layui-form-label" >归属员工</label>
            <div class="layui-input-inline">
                <input type="text" name="vestedEmployee" readonly lay-verify="required" autocomplete="off" class="layui-input" th:value="${userDetails.realName}">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">支付方式</label>
            <div class="layui-input-block" id="paymentMethods">
                <input type="checkbox" name="paymentMethods[]" lay-skin="tag" value="银行转账" title="银行转账" lay-verify="paymentMethods">
                <input type="checkbox" name="paymentMethods[]" lay-skin="tag" value="微信" title="微信" lay-verify="paymentMethods">
                <input type="checkbox" name="paymentMethods[]" lay-skin="tag" value="支付宝" title="支付宝" lay-verify="paymentMethods">
                <input type="checkbox" name="paymentMethods[]" lay-skin="tag" value="工行码" title="工行码" lay-verify="paymentMethods">
                <input type="checkbox" name="paymentMethods[]" lay-skin="tag" value="聚合码" title="聚合码" lay-verify="paymentMethods">
                <input type="checkbox" name="paymentMethods[]" lay-skin="tag" value="建行码" title="建行码" lay-verify="paymentMethods">
                <input type="checkbox" name="paymentMethods[]" lay-skin="tag" value="农行" title="农行" lay-verify="paymentMethods">
                <input type="checkbox" name="paymentMethods[]" lay-skin="tag" value="招行码" title="招行码" lay-verify="paymentMethods">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">支付时间</label>
            <div class="layui-input-inline">
                <input type="text" name="paymentTime" id="paymentTime" lay-verify="paymentTime"  autocomplete="off" class="layui-input" placeholder="例:2000-09-01 12:00 ">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">好友日期</label>
            <div class="layui-input-inline">
                <input type="text" name="addFriendDate" id="addFriendDate" lay-verify="addFriendDate"  autocomplete="off" class="layui-input" placeholder="例:2000-09-01">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" >客户情况</label>
            <div class="layui-input-inline">
                <textarea lay-verify="required" name="customerSituation" id="customerSituation" cols="100" rows="4" style="border-color: #eee;" ></textarea>
            </div>
        </div>
    </div>
    <div class="layui-form-item" >
        <div class="layui-inline" style="padding-left: 22px;">
            <button class="layui-btn"lay-filter="submitForm" lay-submit id="submit" style="padding-left: 22px; margin-bottom: 20px;">推送</button>
        </div>
    </div>
</form>
<script type="text/html" id="toolbarDemo" >

</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看详情</a>
</script>
<script th:inline=none>
    layui.use(['table', 'dropdown','form'], function () {
        var table = layui.table;
        var $ = layui.$;
        var form=layui.form
        var realName;
        var previousData = [];//保存上一次表格数据，用于对比变化

        // 获取当前用户的真实姓名
        $.ajax({
            url: "/pushinfo/userProfile",
            type: "GET",
            success: function(response) {
                // 在这里处理接收到的数据
                realName = response; // 保存当前用户的真实姓名

            },
            error: function(xhr, status, error) {
                // 在这里处理错误
                console.error("发生错误: " + error);
            }
        });

        table.render({
            //表格渲染
            elem: '#pushinfotable',
            url: '/pushinfo/pushinfo'
            , response: {
                statusCode: 10000 //规定成功的状态码，默认：0
            }
            , toolbar: '#toolbarDemo'
            , cellMinWidth: 80,
            limit:20,
            limits:[20]
            , page: false
            ,height: 'full-300'
            , cols: [[
                    { field: 'serialNumber', width: 80, title: '序号' },
                    { field: 'name', width: 120, title: '客户姓名' },
                    { field: 'sex', width: 80,title: '性别' },
                    { field: 'phone',width: 120, title: '电话', templet: function(d) {
                        if (d.vestedEmployee === realName) {
                            return d.phone; // 当前用户可见完整电话号码
                        } else {
                            var hiddenDigits = d.phone.substring(0, d.phone.length - 4).replace(/\d/g, '*'); // 用 '*' 替换电话号码的前面部分
                            var visibleDigits = d.phone.substring(d.phone.length - 4); // 取电话号码的后四位
                            return hiddenDigits + visibleDigits; // 只显示后四位可见，其余用 '*' 替换
                        }
                    } },
                    { field: 'vestedEmployee',  width: 100,title: '授权员工' },
                    { field: 'paymentMethod',  width: 180 ,title: '支付方式' },
                    { field: 'paymentTime',width: 180, title: '支付时间' },
                    { field: 'addFriendDate',width: 110, title: '加好友日期' },
                    { field: 'customerSituation', title: '客户情况' },
                    { field: 'reportDate', title: '报告日期' },
                    { title: '操作', toolbar: '#barDemo' }
                ]]
            , error: function (res, msg) {
                console.log(res, msg)
            }
            , parseData: function (res) {
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                };
            }, done: function (res, curr, count) {
                // 保存当前渲染的数据
                previousData = res.data.list;
            }

        });
        //查看详情
        table.on('tool(pushinfotable)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                // console.log("0.0", data)
                layer.open({
                    type: 2,
                    title: '单据展示',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['1200px', '800px'],
                    content: '/pushinfo/pushinfodetailpage?id='+data.id
                });
            }
        });
        //定时查询新数据
            setInterval(Interval,3000);//设置轮询时间为5s
        function Interval() {
            $.ajax({
                url: "/pushinfo/selectnewpushinfo",
                type: "GET",
                success: function (response) {
                    var newData = response;
                    // 检查新增数据
                    var addedData = findAddedData(previousData, newData);
                    if (addedData.length > 0) {
                        // 弹出框显示新增数据
                        showAddedData(addedData);
                        // 更新表格数据
                        table.reload('pushinfotable', { data: newData });
                    }
                    // 更新 previousData
                    previousData = table.cache['pushinfotable'];
                },
                error: function (xhr, status, error) {
                    console.error("发生错误: " + error);
                }
            });
        };

        // 查找新增数据
        function findAddedData(oldData, newData) {
            var addedData = [];
            if (!oldData) {
                return addedData;
            }
            newData.forEach(function (newItem) {
                var isNew = true;
                oldData.forEach(function (oldItem) {
                    if (isEqual(newItem, oldItem)) {
                        isNew = false;
                    }
                });
                if (isNew) {
                    addedData.push(newItem);
                }
            });
            return addedData;
        };

        // 比较两个对象是否相等
        function isEqual(obj1, obj2) {
            return obj1.id === obj2.id;
        };

        // 弹出框显示新增数据
        function showAddedData(data) {
            var content = "<ul>";
            data.forEach(function (item) {
                content += "<li>" + "恭喜：" + item.vestedEmployee + "开单！" + "</li>";
                // 可以根据需要显示其他字段
            });
            content += "</ul>";
            layer.open({
                type: 1,
                title: '超级战报',
                area: ['1400px', '800px'],
                content: content,
                skin: 'custom-popup' ,// 使用自定义样式类名
                zIndex: layer.zIndex, // 设定弹窗的层级，确保可以重叠显示
                success: function(layero){
                    layer.setTop(layero); // 将当前弹窗置顶
                }
            });
        };



    })
</script>
<script>
    layui.use(['form', 'util', 'laydate'], function(){
        var form = layui.form;
        var laydate = layui.laydate;
        var $ = layui.$;
        form.on('submit(submitForm)', function(data){
            // 阻止默认的表单提交行为
            event.preventDefault();
            // 显示加载动画
            var loadingIndex = layer.load(2, {shade: [0.5,'#000']});
            $.ajax({
                url: '/process/push365add',
                type: 'GET',
                data: data.field,
                success: function(res){
                    // 请求成功后隐藏加载动画
                    layer.close(loadingIndex);
                    clearForm();
                },
                error: function(xhr, status, error){
                    layer.close(loadingIndex);
                    layer.msg('系统错误，请稍后再试', {icon: 2});
                }
            });
            // 手动触发表单的提交
            return false; // 返回 true 表示继续提交表单，返回 false 表示取消提交
        });

        //日期选择器的设置
        laydate.render({
            elem: '#paymentTime',
            format: 'yyyy-MM-dd HH:mm', // 设定日期显示格式
            type: 'datetime',fullPanel: true,});
        laydate.render({
            elem: '#addFriendDate',
            format: 'yyyy-MM-dd', // 设定日期显示格式
            type: 'date',});

        //自定义验证规则
        form.verify({
            name: function(value){
                if(value.length < 1){
                    return '客户姓名必填';
                }
            },
            sex: function(value, item){ // value：表单的值、item：表单的DOM对象
                var $ = layui.jquery;
                var radios = $(item).parents('.layui-input-inline').find('input[type="radio"]:checked');
                if(radios.length === 0){
                    return '请选择性别';
                }
            },
            phone: function(value){
                if(value.length < 1){
                    return '手机号码必填';
                }
                if (!/^1[3456789]\d{9}$/.test(value)){
                    return  "请输入正确手机号码"}
            },
            wechatAccount: function(value){
                if(value.length < 1){
                    return '微信号必填';
                }
            },
            softwareAccount: function(value){
                if(value.length < 1){
                    return '软件账号必填';
                }
            },
            paymentMethods: function(value, item){
                var radioName = $(item).attr('name');
                var isChecked = false;
                $('input[name="' + radioName + '"]').each(function() {
                    if ($(this).is(':checked')) {
                        isChecked = true;
                        return false;
                    }
                });
                if (!isChecked) {
                    return '支付方式必填';
                }
            },
            paymentTime: function(value){
                if(value.length < 1){
                    return '支付时间必填';
                }
            },
            addFriendDate: function(value){
                if(value.length < 1){
                    return '加好友日期必填';
                }
            },
            customerSituation: function(value){
                if(value.length < 1){
                    return '客户情况必填';
                }
            }


        });

        // 清空表单
        function clearForm() {
            // 清除姓名输入框
            $("input[name='name']").val('');
            // 清除性别单选框
            $("input[name='sex']").removeAttr("checked");
            // 清除手机号输入框
            $("input[name='phone']").val('');
            // 清除微信账号输入框
            $("input[name='wechatAccount']").val('');
            // 清除软件账号输入框
            $("input[name='softwareAccount']").val('');
            // 清除支付方式复选框
            // 获取所有 name 属性为 "paymentMethods[]" 的复选框元素
            var checkboxes = document.querySelectorAll('input[name="paymentMethods[]"]');
            // 遍历复选框元素，并将它们的 checked 属性设置为 false，即取消选中状态
            checkboxes.forEach(function(checkbox) {
                checkbox.checked = false;
            });
            // 清除支付时间输入框
            $("input[name='paymentTime']").val('');
            // 清除好友日期输入框
            $("input[name='addFriendDate']").val('');
            // 清除客户情况文本域
            $("#customerSituation").val('');
            layui.form.render();
        }

    });
</script>
</body>
</html>